<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>图片与文字垂直对齐</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style type="text/css">
      .one{
			 	 width: 600px;
			 	 height: 500px;
			 	 border: 1px  solid  red;
			 }


			 .one img{
			 	 margin-top: 10px;

			 	 vertical-align: middle;
			 }


       .three{
           width: 300px;
           height: 300px;
           border: 1px solid red;
            display: none;       /* 将元素进行隐藏 */
		   	 /* visibility: hidden;*/  /* 将元素进行隐藏 */


            

            }

            .four{
                width: 30px;
                height: 30px;
                border: 2px solid blue;
            }
            
          



    </style>
</head>
<body>
        <!-- 每一种inlne-block元素  都有一个默认的vertical-align:baseline
        ☞vertical-align:middle  垂直对齐。 vertical-align与inline-block更搭配。 -->
      

        <div class="one">
                <img src="12.jpg"><span>文字标题</span>
            </div>

            <br>
            <br>

            <div class="three">
                    <!-- Css可见性
                    ☞overflow: hidden     将超出部分进行隐藏
                    ☞display:  none			直接将元素隐藏
                display：block       将元素显示(与js配合更搭)
                    ☞visibility:hidden		将元素隐藏
                          display: none;    将元素隐藏后不占位置
                            visibility: hidden; 将元素隐藏后占原来的位置
                -->
            </div>
            <div class="four">

            </div>


   
</body>
</html>